<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>吃豆人</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="world">
<!--    <div class="wall"></div>-->
<!--    <div class="wall"></div>-->
<!--    <div class="wall"></div>-->
<!--    <div class="wall"></div>-->
<!--    <div class="wall"></div>-->
<!--    <br>-->
<!--    <div class="wall"></div>-->
<!--    <div class="coin"></div>-->
<!--    <div class="pacman"></div>-->
<!--    <div class="ground"></div>-->
<!--    <div class="wall"></div>-->
<!--    <br>-->
<!--    <div class="wall"></div>-->
<!--    <div class="wall"></div>-->
<!--    <div class="wall"></div>-->
<!--    <div class="wall"></div>-->
<!--    <div class="wall"></div>-->
<!--    <br>-->

  </div>
  <script>
    //1 = <div class="wall"></div>
    //2 = <div class="coin"></div>
    //3 = <div class="ground"></div>
    //4 = <div class="pacman"></div>

    var map=[
      [1,1,1,1,1,1,1,1,1,1,1,1,1],
      [1,2,2,2,2,2,2,2,2,2,2,2,1],
      [1,2,1,1,1,2,1,2,1,1,1,2,1],
      [1,2,1,2,2,2,2,2,2,2,1,2,1],
      [1,2,2,2,1,1,4,1,1,2,2,2,1],
      [1,2,1,2,2,2,2,2,2,2,1,2,1],
      [1,2,1,1,2,2,1,2,2,1,1,2,1],
      [1,2,2,2,2,2,1,2,2,2,2,2,1],
      [1,1,1,1,1,1,1,1,1,1,1,1,1]
    ];
    var pacman = {
      x:4,
      y:6,
      dir:"right"
    };
    var world = document.getElementById("world");
    function draw() {
      var html = "";
      for (var i = 0; i < map.length;i++){
        for (var j = 0;j<map[i].length;j++){
          if(map[i][j] === 1){
            html += '<div class="wall"></div>';
          }else if (map[i][j] === 2){
            html += '<div class="coin"></div>';
          }else if (map[i][j] === 3){
            html += '<div class="ground"></div>';
          }else if (map[i][j] === 4){
            html += '<div class="pacman '+pacman.dir+' "></div>';
          }
        }
        html += "<br>"
      }
      world.innerHTML = html;
    }
    draw();
    document.onkeydown = function (event) {
      if (event.code === "ArrowRight"){
        pacman.dir = "right";
        if (map[pacman.x][pacman.y+1] !== 1){
          map[pacman.x][pacman.y] = 3;
          pacman.y = pacman.y+1;
          map[pacman.x][pacman.y] = 4;
        }
      }else if (event.code === "ArrowLeft"){
        pacman.dir = "left";
        if (map[pacman.x][pacman.y-1] !== 1){
          map[pacman.x][pacman.y] = 3;
          pacman.y = pacman.y-1;
          map[pacman.x][pacman.y] = 4;
        }
      }else if (event.code === "ArrowUp"){
        pacman.dir = "up";
        if (map[pacman.x-1][pacman.y] !== 1){
          map[pacman.x][pacman.y] = 3;
          pacman.x = pacman.x-1;
          map[pacman.x][pacman.y] = 4;
        }
      }else if (event.code === "ArrowDown"){
        pacman.dir = "down";
        if (map[pacman.x+1][pacman.y] !== 1){
          map[pacman.x][pacman.y] = 3;
          pacman.x = pacman.x+1;
          map[pacman.x][pacman.y] = 4;
        }
      }
      draw();
    }
  </script>
</body>
</html>